import React, { useEffect, useState } from 'react';
import { Button, message, Steps, theme } from 'antd';
import NewsEditor from '../../../components/news-manage/NewsEditor'
import NewsForm from '../../../components/news-manage/NewsForm'
import axios from 'axios';
import { BackwardOutlined } from '@ant-design/icons'

const NewsUpdate = (props) => {
    const { token } = theme.useToken();
    const [current, setCurrent] = useState(0);
    const [submittableMap, setSubmittableMap] = useState({});
    const [valueMap, setvalueMap] = useState(null);
    const User = JSON.parse(localStorage.getItem("token"))

    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setvalueMap({
                0: { title: res.data.title, categoryId: res.data.categoryId },
                1: res.data.content
            })
        })
    }, [props.match.params.id])

    const setSubmittableEvent = (idx, submittable) => {
        const newsubmittableMap = { ...submittableMap }
        newsubmittableMap[idx] = submittable
        setSubmittableMap(newsubmittableMap)
    }

    const setvalueMapEvent = (idx, values) => {
        const newvalueMap = { ...valueMap }
        newvalueMap[idx] = values
        setvalueMap(newvalueMap)
    }
    const steps = [
        {
            title: '基本信息',
            description: "新闻标题，新闻分类",
            content: <NewsForm valueMap={valueMap} setvalueMapEvent={setvalueMapEvent} setSubmittableEvent={setSubmittableEvent}></NewsForm>,
        },
        {
            title: '新闻内容',
            description: "新闻主体内容",
            subTitle: 'Left 00:00:08',
            content: <NewsEditor valueMap={valueMap} setvalueMapEvent={setvalueMapEvent} setSubmittableEvent={setSubmittableEvent} ></NewsEditor>,

        },
        {
            title: '新闻提交',
            description: "保存草稿或者提交审核",
            content: '请把你更新的新闻保存草稿或者提交审核！',

        },
    ];

    const next = () => {
        setCurrent(current + 1);
    };
    const prev = () => {
        setCurrent(current - 1);
    };
    const items = steps.map((item) => ({
        ...item,
        key: item.title,

    }));
    const contentStyle = {
        // lineHeight: '260px',
        textAlign: 'center',
        color: token.colorTextTertiary,
        // backgroundColor: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        // border: `1px dashed ${token.colorBorder}`,
        marginTop: 16,
        paddingTop: 20,
    };
    const handleSave = (auditState) => {
        const params = {
            // "title": "千锋教育",
            // "categoryId": 3,
            ...valueMap[0],
            "content": valueMap[1],
            // "region": User.region ? User.region : "全球",
            // "author": User.username,
            // "roleId": User.roleId,
            "auditState": auditState,
            // "publishState": 0,
            // "createTime": Date.now(),
            // "star": 0,
            // "view": 0,
            // "publishTime": 0
        }
        const statusDict = {
            0: '保存草稿!',
            1: '提交审核!'
        }
        const urlDict = {
            0: '/news-manage/draft',
            1: '/news-manage/list'
        }
        axios.patch(`/news/${props.match.params.id}`, params).then(res => {
            props.history.push(urlDict[auditState])
            message.success(statusDict[auditState])
        })

    }
    return (
        <>
            {
                valueMap && <>
                    <h2><BackwardOutlined style={{ fontSize: '16px', color: '#08c', height: "30px", marginRight: "5px" }} onClick={() => { window.history.back() }} />更新新闻</h2>
                    <Steps current={current} items={items} />
                    <div style={contentStyle}> {steps[current].content}</div>
                    <div
                        style={{
                            marginTop: 24,
                        }}
                    >
                        {current < steps.length - 1 && (
                            <Button type="primary" onClick={() => next()} disabled={!submittableMap[current]}>
                                Next
                            </Button>
                        )}
                        {current === steps.length - 1 && (
                            <>
                                <Button type="primary" onClick={() => { handleSave(0) }}>
                                    保存草稿
                                </Button>
                                <Button type="primary" onClick={() => { handleSave(1) }} danger >
                                    提交审核
                                </Button>
                            </>

                        )}
                        {current > 0 && (
                            <Button
                                style={{
                                    margin: '0 8px',
                                }}
                                onClick={() => prev()}
                            >
                                Previous
                            </Button>
                        )}
                    </div>
                </>
            }
        </>
    );
};

export default NewsUpdate;
